<template>
    <el-main style="background-color: rgb(240,243,243);">
        <div class="mainDiv">
            <div class="rowHead">
                <el-date-picker class="w300" v-model="times" type="daterange" align="right" placeholder="选择日期范围（默认当天日期）" :picker-options="timeArea" v-qx="permission.date" readonly>
                </el-date-picker>
                <el-button type="primary" icon="el-icon-d-arrow-left" @click="goBack()">返回</el-button>
            </div>
            <el-row :gutter="20">
                <el-col :span="10" class="pl0">        
                    <el-table :data="shopFeat" height="547" id="leftTable" @row-click="look">
                        <el-table-column type="expand">
                            <el-table :data="dlist" :stripe="true" @expand-change="showChilds" @row-click="look">
                                <el-table-column type="expand">
                                    <template slot-scope="scope">
                                        <el-table :data="scope.row.list" :stripe="true" @row-click="look">
                                            <el-table-column prop="dname" label="小组"></el-table-column>
                                            <el-table-column prop="total" label="现金业绩"></el-table-column>
                                            <el-table-column prop="katotal" label="卡耗业绩"></el-table-column>
                                        </el-table> 
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dname" label="部门" :show-overflow-tooltip="true"></el-table-column>
                                <el-table-column prop="total" label="现金业绩">
                                </el-table-column>
                                <el-table-column prop="katotal" label="卡耗业绩"></el-table-column>
                            </el-table>
                        </el-table-column>
                        <el-table-column prop="dname" label="门店" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="total" label="现金业绩">
                        </el-table-column>
                        <el-table-column prop="katotal" label="卡耗业绩">
                        </el-table-column>                       
                    </el-table>         
                </el-col>
                <el-col :span="14" class="pr0">
                    <el-table :data="ylist" :stripe="true" height="515">
                        <el-table-column prop="ordertype" label="业绩类型"></el-table-column>
                        <el-table-column prop="name" label="员工姓名"></el-table-column>
                        <el-table-column prop="worknum" label="员工工号"></el-table-column>
                        <el-table-column prop="xianjinyeji" label="现金业绩"></el-table-column>
                        <el-table-column prop="kahaoyeji" label="卡耗业绩"></el-table-column>
                        <el-table-column prop="addtime" label="业绩时间" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.addtime|hourTime}}
                            </template>
                        </el-table-column>
                        <el-table-column label="详情">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="chakan(scope.row)" v-qx="permission.info"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block center bg-light">
                        <el-pagination layout="prev, pager, next" :page-size="page.limits" @current-change="currpage" :total="total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
            
        </div>
    </el-main> 
</template>
<script>
import C from '@/common/common.js'
import P from '@/service/shop/popup.js'

export default {
  name: 'featList',
  data () {
    return {
      dlist: [],
      ylist: [],
      shopFeat: [],
      page: {
        pages: 1,
        limits: 15
      },
      total: 0,
      times: [new Date(), new Date()],
      timeArea: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, td])
          }
        }]
      },
      pid: 0,
      floor: 0,
      permission: {
        date: 'bumenfeat_date',
        info: 'bumenfeat_info'
      }
    }
  },
  created () {
    let that = this
    that.times = this.$route.params.times
    that.getShopFeat()
  },
  mounted: function () {
    let that = this
    that.getList()
  },
  methods: {
    showChilds: async function (row) {
      // 防止重复请求
      if (row.flag) return

      let rdata = {
        pid: row.did,
        times: JSON.stringify(this.times)
      }

      if (!this.times) {
        rdata.times = JSON.stringify([new Date(), new Date()])
      }
      let res = await C.ajax('/shop/money/getfeatchild', rdata, 'post')
      if (res) {
        row.list = res
        row.flag = true
      }
    },

    look: function (row) {
      this.pid = row.did
      this.floor = row.floor
      this.getInfo()
    },

    chakan: async function (row) {
      let obj = { id: row.orderid, ordertype: row.ordertype }
      await P.showOrderPopup(obj)
    },

    currpage: function (val) {
      this.page.pages = val
      this.getInfo()
    },

    getInfo: async function () {
      let ydata = {
        pid: this.pid,
        floor: this.floor,
        times: JSON.stringify(this.times),
        page: JSON.stringify(this.page)
      }
      if (!this.times) {
        ydata.times = JSON.stringify([new Date(), new Date()])
      }
      let res = await C.ajax('/shop/money/getfeatlist', ydata, 'post')
      if (res) {
        this.total = res.count
        this.ylist = res.data
      }
    },

    getList: async function () {
      if (!this.times) {
        this.times = [new Date(), new Date()]
      }
      let res = await C.ajax('/shop/money/getfeatinfo', { times: JSON.stringify(this.times) }, 'post')
      if (res) {
        res.forEach((v) => {
          v.list = []
        })
        this.dlist = res
      }
    },

    getShopFeat: async function () {
      let that = this
      let times = that.times
      let res = await C.ajax('/shop/money/getshopfeat', { times: JSON.stringify(times) }, 'post')
      that.shopFeat = res
    },

    goBack () {
      this.$router.go(-1)
    },

    test () {
      console.log('test')
    }
  }
}
</script>

<style>
    .flex_spcb{
        display:flex;
        justify-content: space-between;
    }
    #leftTable .el-table__body-wrapper{
        overflow-y: auto;
    }
    #leftTable .el-table__row{
        cursor: pointer;
    }
    .rowHead{
        padding: 10px;
        background-color: #fff;
        margin: 0px 0px 10px 0px !important;
    }         
    .groupHead span,.groupBody span{
        width: 33.33%;
        text-align: center;
    }
    .groupBody{
        padding: 5px 0;
    }
    .groupBody:hover{
        background-color: #FAFAFA;
        transition: background-color .25s ease;
        cursor: pointer;
    }    
</style>